<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息表</title>
    <link rel="stylesheet" href="../css/element.css">
    <style>
        h3 {
            margin-bottom: 50px;
        }

        #app {
            margin: 100px auto;
            width: 800px;
        }
    </style>
</head>

<body>
<div id="app">
    <template>
        <div>
            <h1>学生简历信息</h1>
                <el-form label-width="80px" :model="studentResume">
                    <el-form-item>
                        <el-input v-model.number="studentResume.id" type="hidden"></el-input>
                    </el-form-item>
                    <el-form-item label="学号">
                        <el-input v-model="studentResume.studentId" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="studentResume.email" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="获奖经历">
                        <el-input
                                type="textarea"
                                v-model="studentResume.project"
                                maxlength="30"
                                show-word-limit
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="自我介绍">
                        <el-input
                                type="textarea"
                                v-model="studentResume.content"
                                maxlength="30"
                                show-word-limit
                        ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="resumeAddOrUpdate()">提 交</el-button>
                </div>
        </div>
    </template>
</div>


<!-- import Vue before Element -->
<script src="../js/vue.js"></script>
<!-- import JavaScript -->
<script src="../js/element.js"></script>
<script src="../js/axios.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data: {
            formLabelWidth: '120px',
            studentResume: {},
        },
        methods: {
            updateList: function (studentId) {
                axios.get('/studentResume/'+studentId)
                    .then(response => {
                        console.log(response)
                        if(response.data.code===200) {
                            if(response.data.data) {
                                this.studentResume = response.data.data;
                                console.log(response.data.data)
                            }
                        }
                        else{
                            app.$message({
                                showClose: true,
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                        }
                    )
            },
            resumeAddOrUpdate: () => {
                if (app.studentResume.id) {
                    axios.put('/studentResume', app.studentResume)
                        .then(function (res) {
                            console.log(res)
                            if (res.data.code === 200) {
                                app.$message({
                                    showClose: true,
                                    message: '更新成功',
                                    type: 'success'
                                });
                                setTimeout(() => {

                                }, 800);
                            } else {
                                app.$message({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error'
                                });
                            }
                        })
                } else {
                    axios.post('/studentResume', app.studentResume)
                        .then(function (res) {
                            console.log(res)
                            if (res.data.code === 200) {
                                app.$message({
                                    showClose: true,
                                    message: '添加成功',
                                    type: 'success'
                                });
                                setTimeout(() => {

                                }, 800);
                            } else {
                                app.$message({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error'
                                });
                            }
                        })
                }
        }},
        mounted() {
            var urlParam = decodeURI(window.location.href.split("?")[1]);
            let studentId=parseInt(urlParam.split("studentId=")[1]);
            this.updateList(studentId);
        },
        computed:
            {}

    })

</script>
</body>
</html>